<template>
  <div>
    <el-cascader
      ref="cascader"
      :value="departmentId"
      :options="data"
      :props="defaultProps"
      size="mini"
      @change="handleChange"
    />
  </div>
</template>
<script>
import { getDepartmentRequest } from '@/api/department'
import { transformListTotree } from '@/utils'
export default {
  name: 'SelectTree',
  props: {
    departmentId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      data: [],
      defaultProps: {
        children: 'children',
        label: 'name',
        value: 'id',
        checkStrictly: true
      }
    }
  },
  async created() {
    await this.getDepartment()
  },
  methods: {
    // 获取部门列表
    async getDepartment() {
      const res = await getDepartmentRequest()
      this.data = transformListTotree(res.data, 0)
    },
    handleChange(value) {
      if (value.length > 0) {
        value = value[value.length - 1]
      }
      this.$refs.cascader.dropDownVisible = false
      this.$emit('update:departmentId', value)
    }
  }
}
</script>
<style lang='less'  scoped>
</style>
